<template>
  <div class="tabbar">
    <!-- 背景由background-image实现，无需img标签 -->
    <div
      v-for="(item, idx) in itemList"
      :key="item.itemMark"
      class="itemWrap"
      :class="{
        active: selected === item.itemMark,
        center: idx === middleIndex,
      }"
      @click="getval(item.itemMark)"
    >
      <template v-if="idx === middleIndex">
        <div class="center-btn-outer">
          <div class="center-btn-inner">
            <van-icon name="plus" class="center-icon" />
          </div>
        </div>
      </template>
      <template v-else>
        <div class="icon-wrap" :class="{ active: selected === item.itemMark }">
          <van-icon :name="item.icon" />
          <span v-if="item.badge" class="badge">{{ item.badge }}</span>
        </div>
        <span class="tab-txt" :class="{ active: selected === item.itemMark }">{{
          item.itemTxt
        }}</span>
      </template>
    </div>
  </div>
</template>

<script>
import { Icon } from "vant";
export default {
  components: {
    "van-icon": Icon,
  },
  data() {
    return {
      selected: this.$route.path.substr(1),
      middleIndex: 2, // 中间按钮索引（5个菜单时2为中间）
      itemList: [
        {
          itemTxt: "待办",
          itemMark: "daiban",
          icon: "todo-list-o",
        },
        {
          itemTxt: "消息",
          itemMark: "message",
          icon: "chat-o",
        },
        {
          itemTxt: "首页",
          itemMark: "home",
          icon: "apps-o",
        },
        {
          itemTxt: "通讯录",
          itemMark: "contacts",
          icon: "friends-o",
        },
        {
          itemTxt: "我的",
          itemMark: "my",
          icon: "user-o",
        },
      ],
    };
  },
  methods: {
    getval(val) {
      this.selected = val;
      this.$router.push("/" + this.selected);
    },
  },
};
</script>

<style scoped>
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  background: url("@/assets/images/tabbar-center.svg") center top/cover
      no-repeat,
    transparent;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 2px 24px 0 rgba(77, 124, 255, 0.1);
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  z-index: 1000;
  padding-bottom: calc(env(safe-area-inset-bottom, 8px) + 8px);
  overflow: visible;
  backdrop-filter: blur(10px);
  padding-top: 0;
}
.itemWrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  height: 80px;
  z-index: 2;
}
.icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  position: relative;
  transition: background 0.2s;
}
.icon-wrap.active .van-icon {
  color: #4d7cff !important;
  font-weight: bold;
  filter: drop-shadow(0 2px 8px #4d7cff22);
}
.icon-wrap .van-icon {
  font-size: 26px;
  color: #b2b2b2;
  transition: color 0.2s, filter 0.2s;
}
.tab-txt {
  font-size: 14px;
  color: #b2b2b2;
  margin-top: 2px;
  display: block;
  text-align: center;
  font-weight: 400;
  letter-spacing: 0.5px;
  transition: color 0.2s, font-weight 0.2s;
}
.tab-txt.active {
  color: #4d7cff;
  font-weight: 600;
}
.badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  background: #ff3b30;
  color: #fff;
  font-size: 11px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  font-weight: bold;
  z-index: 3;
  box-shadow: 0 2px 6px #ff3b3022;
}
.center-btn-outer {
  position: absolute;
  left: 50%;
  top: -16px;
  transform: translateX(-50%);
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  background: linear-gradient(135deg, #4d7cff 60%, #7faaff 100%);
  border-radius: 50%;
  box-shadow: 0 4px 16px 0 rgba(77, 124, 255, 0.18), 0 2px 8px #4d7cff22;
  transition: box-shadow 0.2s, transform 0.2s;
}
.center-btn-inner {
  width: 60px;
  height: 60px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px #4d7cff22;
}
.center-icon {
  font-size: 36px !important;
  color: #4d7cff !important;
  font-weight: bold;
}
.center-btn-outer:active {
  transform: translateX(-50%) scale(0.96);
  box-shadow: 0 2px 8px 0 rgba(77, 124, 255, 0.12);
}
</style>
